<template>
    <div ref="chart" style="width: 100%;height: 100%;">

    </div>
</template>
<script>
import { getDonutChartData } from '../api/DonutChart';

export default {
   data() {
      return {
        myChart:null,
        itemData:[]
      }
   },
   mounted(){
      this.getDonutChart();
   },
   computed:{
   },
   methods:{
    initChart(){
        this.myChart = this.$echarts.init(this.$refs.chart);
        const option = {
          tooltip: {
    trigger: 'item'
  },
            title: {
    text: '产品销量',
    left: 'center',
    top: 'center'
  },
  series: [
    {
      // name: '',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      label: {
        // normal:{
          formatter: '{b}: {c}', // 这里的格式化字符串就是显示的内容
          show: true,
          position: 'outside'
        // }

},
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: true
      },
      data: this.itemData
    }
  ]    
        };       
      //   getDonutChartData().then(res=>{
      //     myChart.setOption({  //动画的配置
      //                   series: [{
      //                   data: res  //这里数据是一个数组的形似
      //                   }]
                        
      //               })
      // })
      this.myChart.setOption(option); 
      // 当窗口大小改变 echarts重置大小
      window.addEventListener('resize', () => {
        this.myChart.resize()
      })
    },
    getDonutChart(){
      getDonutChartData().then(res=>{
        this.itemData = res;
        this.initChart();
      })
      
    }
   }
}
</script>
<style  scoped>

</style>
